<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pass,
        #repass {
            border-style: solid;
            border-width: 1px;
            border-radius: 2px;
            outline: none;
            padding-left: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="http://www.baidu.com">
            <div class="form-group">
                <label for="pass">密码</label>
                <input type="text" name="pass" id="pass">
                <span>*</span>
            </div>
            <div class="form-group">
                <label for="pass">重复密码</label>
                <input type="password" name="reass" id="repass" placeholder="请再次输入密码">
                <span>*</span>
            </div>
            <input type="submit">
        </form>
    </div>
</body>
<script>
    let form = document.querySelector("form")
    let pass = document.querySelector("#pass")
    let repass = document.querySelector("#repass")


    pass.onblur = validPass
    pass.onfocus = function () {
        this.nextElementSibling.innerHTML = ''
        this.style.borderColor = 'black'
    }
    repass.onblur = validRepass
    repass.onfocus = function () {
        this.nextElementSibling.innerHTML = ''
        this.style.borderColor = 'black'
    }
    form.onsubmit = (e) => {
        let flag = validPass() & validRepass()
        return flag > 0
    }

    //验证密码不能为空 长度6-12位 和密码是数字
    function validPass() {
        let v = pass.value
        let span = pass.nextElementSibling
        span.innerHTML = ''
        span.style.color = 'red'
        if (v === '') {
            span.innerHTML = '密码不能为空'
            pass.style.color = 'red'
            pass.style.borderColor = "red"
            return false
        }
        if (v.length > 12 || v.length < 6) {
            span.innerHTML = '密码长度6-12位'
            pass.style.borderColor = "red"
            pass.style.color = 'red'
            return false
        }
        let str = '0123456789'
        for (let i = 0; i < v.length; i++) {
            let st = v[i]
            if (str.indexOf(st) === -1) {
                span.innerHTML = "密码必须是数字"
                pass.style.borderColor = "red"
                return false
            }
        }
        span.innerHTML = "密码正确"
        span.style.color = "green"
        pass.style.borderColor = "green"
        return true
    }

    //验证非空和密码一致
    function validRepass() {
        let flag = validPass()
        let span = repass.nextElementSibling
        span.innerHTML = ""
        span.style.color = 'red'
        if (!flag) {
            span.innerHTML = "请正确输入密码"
            repass.style.borderColor = "red"
            return false
        }
        let v = repass.value
        let v1 = pass.value
        if (v !== v1) {
            span.innerHTML = "重复密码输入不正确"
            repass.style.borderColor = "red"
            return false
        }
        span.innerHTML = "重复密码正确"
        span.style.color = "green"
        repass.style.borderColor = "green"
        return true
    }
</script>

</html>